<template>
  <div id="app">
    <div id="nav">
      <span v-for="route in routes" :key="route.name">
        <router-link :to="route.path">
          <el-link>{{ route.name }} </el-link>
        </router-link>
        <span> | </span>
      </span>
      <!-- <MxButton>
        <template #default="slot">
          <div>
            {{ slot.type }}
          </div>
        </template>
      </MxButton>
      <MxTitle>
        <template #h1="props"> {{ props.count }} </template>
      </MxTitle> -->
    </div>
    <router-view />
  </div>
</template>
<script>
import { foo, Book, count } from '@/assets/scripts/test';
import { routes } from '@/router/index';
export default {
  data() {
    return {
      routes,
    };
  },
  mounted() {
    foo();
    const book = new Book('myTitle', 'my author');
    book.getInfo();
    book.getInfoPromise().then((res) => {
      res.setStyles;
    });
    book.setStyles(
      {
        color: 'green',
        size: 'small',
        cb: (book) => {
          console.log(book.title);
        },
      },
      [1, 2]
    );
  },
};
</script>
<style>
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
#app {
  padding: 8px;
  height: calc(100% - 16px);
  width: 1200px;
  margin: 0 auto;
}
#nav {
  padding: 12px 0;
  height: 24px;
  line-height: 24px;
}
.height-100 {
  height: calc(100% - 48px);
}
h1,
h2,
h3,
p {
  margin: 12px;
}
</style>

